<!doctype html>
<html>
  <head>
    <title>PGlite Worker Example</title>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./utils.js"></script>
    <script type="importmap">
      {
        "imports": {
          "@electric-sql/pglite/worker": "../dist/worker/index.js",
          "@electric-sql/pglite/live": "../dist/live/index.js"
        }
      }
    </script>
    <style>
      #output {
        font-family: monospace;
        overflow: auto;
        max-height: 250px;
        border: 1px solid #eee;
        border-radius: 0.5rem;
        padding: 10px;
        margin: 1rem 0;
        font-size: 9px;
        line-height: 11px;
      }
      button {
        margin: 0 0.5rem 0 0;
      }
    </style>
  </head>
  <body>
    <h1>PGlite Worker Example</h1>
    <p>Leader: <span id="leader" style="color: red">false</span></p>
    <p>
      <button id="insert">Insert Data</button>
      <button id="clear">Clear Data</button>
    </p>
    <pre id="output"></pre>
    <div class="script-plus-log">
      <div class="scripts">
        <h2>Worker Thread - <code>worker-process.js</code></h2>
        <div class="script" rel="./worker-process.js"></div>
        <h2>Main Thread</h2>
        <script type="module">
          import { PGliteWorker } from '@electric-sql/pglite/worker'
          import { live } from '@electric-sql/pglite/live'

          console.log('Creating worker...')
          const pg = new PGliteWorker(
            new Worker(new URL('./worker-process.js', import.meta.url), {
              type: 'module',
            }),
            {
              extensions: {
                live,
              },
            },
          )

          pg.onLeaderChange(() => {
            if (pg.isLeader) {
              document.title = '[leader] PGlite Worker Example'
              const leader = document.getElementById('leader')
              leader.textContent = 'true'
              leader.style.color = 'green'
            }
          })

          console.log('Creating table...')

          await pg.exec(`
  CREATE EXTENSION IF NOT EXISTS vector;
  CREATE TABLE IF NOT EXISTS test (
    id SERIAL PRIMARY KEY,
    data vector(3)
  );
`)

          console.log('Ready!')

          async function insertData() {
            const data = [Math.random(), Math.random(), Math.random()]
            await pg.query(`INSERT INTO test (data) VALUES ($1)`, [
              JSON.stringify(data),
            ])
          }

          async function clearData() {
            await pg.query(`DELETE FROM test`)
          }

          const btnInsert = document.querySelector('#insert')
          btnInsert.addEventListener('click', insertData)

          const btnClear = document.querySelector('#clear')
          btnClear.addEventListener('click', clearData)

          // pg.live.query(
          pg.live.incrementalQuery(`SELECT * FROM test`, [], 'id', (data) => {
            const output = document.getElementById('output')
            output.textContent = JSON.stringify(data.rows, null, 2)
          })
        </script>
      </div>
      <div id="log"></div>
    </div>
  </body>
</html>
